<template>
  <div class="table-slot-wrapper">
    <span :class="['common-text', renderObj.className]" :title="renderObj.title">{{ slotData.processDeadLineName }}</span>
  </div>
</template>

<script>
export default {
  name: 'ProcessDeadLineNameTableRender',
  props: {
    slotData: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    renderObj() {
      const { processIsCoverTime } = this.slotData;
      if(processIsCoverTime) {
        const title = $.i18n('collaboration.process.mouseover.overtop.true.title');
        return {
          title: title,
          className: 'color_red'
        }
      } else {
        const title = $.i18n('collaboration.listsent.overtime.no.title');
        return {
          title: title,
          className: ''
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .table-slot-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    .common-text {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-word;
    }
  }
</style>